import React, { useState } from 'react';
import { Search ,Swiper } from 'react-vant';

function Index() {
  const [value, setValue] = useState('');
  const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
  const items = colors.map((color, index) => (
    <Swiper.Item key={color}>
      <div
        onClick={() => {
          Toast.info(`你点击了卡片 ${index + 1}`);
        }}
      >
        {index + 1}
      </div>
    </Swiper.Item>
  ));
  return (
    <div>
       <Search
          shape="round"
          background="#4fc08d"
          value={value}
          onChange={setValue}
          placeholder="请输入搜索关键词"
        />
         <div className="demo-swiper">
          <Swiper autoplay={5000}>{items}</Swiper>
        </div>
    </div>
  )
}

export default Index